 <template>
  <Container>
    <div class="container-header" slot="header">
      <!--  -->
      <Form class="search group" v-if="tab=='tab1'">
        <Row>
          <Col span="8">
            <FormItem label="科室">
              <Select v-model="list.pageData.form.officeId" clearable filterable @on-change="setBranch">
                <Option v-for="(item, index) of reportDepart" :value="item" :key="index">{{item.name}}</Option>
              </Select>
            </FormItem>
            <!-- 门店类型 -->
            <FormItem label="门店类型">
              <Select v-model="list.pageData.form.storeTypeId" clearable filterable @on-change="setCycle">
                <Option v-for="(item, index) of reportStoreTypeList" :key="index" :value="item.value">{{item.desc}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="7">
            <FormItem label="部门">
              <Select v-model="list.pageData.form.departmentId" clearable filterable @on-change="setDistribute">
                <Option v-for="(item, index) of list.pageData.branch" :key="index" :value="item.id">{{item.name}}</Option>
              </Select>
            </FormItem>
            <FormItem label="周期">
              <!-- <DatePicker
                v-model="list.pageData.form.cycle"
                format="yyyy-MM-dd"
                type="year"
                placement="bottom-start"
                placeholder="选择日期"
                @on-enter="getData"></DatePicker> -->
              <Select v-model="list.pageData.form.cycle" clearable filterable @on-change="setDateData">
                <Option v-for="(item, index) of list.pageData.reportBrandCycleList" :key="index" :value="item.beginYearMonth + '~' + item.endYearMonth">{{item.beginYearMonth}}~{{item.endYearMonth}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="7">
            <FormItem label="经销商">
              <Select multiple v-model="list.pageData.form.distributorId" clearable filterable @on-change="getData()">
                <Option v-for="(item) of list.pageData.distributor" :key="item.distributorId" :value="item.distributorId">{{item.distributorName}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="2" class="search">
            <FormItem>
              <Button class="btn-search large" type="primary" icon="ios-search" @click="getData()"></Button>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <!-- 明细 -->
      <Form class="search group" v-else-if="tab=='tab2'">
        <Row>
          <Col span="7">
            <FormItem label="门店维护人">
              <Input v-model="list.pageData1.form.storeMaintainerName"/>
            </FormItem>
            <FormItem label="门店名称">
              <Input v-model="list.pageData1.form.storeName"/>
            </FormItem>
          </Col>
          <Col span="7">
            <FormItem label="门店类型">
              <Select v-model="list.pageData1.form.storeTypeId" clearable filterable @on-change="setCycle1">
                <Option v-for="(item, index) of reportStoreTypeList" :key="index" :value="item.value">{{item.desc}}</Option>
              </Select>
            </FormItem>
            <FormItem label="巡店状态">
              <Select v-model="list.pageData1.form.isComplete" clearable >
                <Option v-for="(item, index) of list.pageData1.isCompleteList" :key="index" :value="item.status">{{item.name}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="7">
            <FormItem label="周期">
              <!-- <DatePicker
                v-model="list.pageData1.form.cycle"
                format="yyyy-MM-dd" 
                type="year" 
                placement="bottom-start" 
                placeholder="选择日期"
                @on-enter="getData"></DatePicker> -->
              <Select v-model="list.pageData1.form.cycle" clearable filterable @on-change="setDateData1">
                <Option v-for="(item, index) of list.pageData1.reportBrandCycleList1" :key="index" :value="item.text">{{item.beginYearMonth}}~{{item.endYearMonth}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="2" class="search">
            <FormItem>
              <Button class="btn-search large" type="primary" icon="ios-search" @click="getDetailedData()"></Button>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </div>
    <Tabs v-model="tab">
      <TabPane label="巡店统计" name="tab1">
        <Table
        :height="options.tableHeight"
        ref="selection" stripe
        :columns="list.pageData.columns" 
        :data="list.pageData.data">
        </Table>
        <PageItem
          @complete="getData" 
          :totalItem="list.pageData.total"
          :currentPage="list.pageData.current">
        </PageItem>
      </TabPane>
      <TabPane label="巡店明细" name="tab2">
        <Table 
        :height="options.tableHeight" 
        ref="selection" stripe 
        :columns="list.pageData1.columns"
        :data="list.pageData1.data">
        </Table>
        <PageItem1
          @complete="getDetailedData"
          :totalItem="list.pageData1.total"
          :currentPage="list.pageData1.current">
        </PageItem1>
      </TabPane>
    </Tabs>
    <Loader :status="list.pageData.status" @refresh="getData"></Loader>
    <Loader :status="list.pageData1.status" @refresh="getDetailedData"></Loader>
  </Container>
</template>
<script>
import listData from './list/PatrolListData'
import table from '@/table'
import PageItem from './edit/PageItem'
import PageItem1 from './edit/PageItem'
import { mapGetters } from 'vuex'
import { clearEmpty, formatMonth } from '@/util'
export default {
  name: 'report/brandpatrol/list',
  components: {
    PageItem,
    PageItem1
  },
  data() {
    return {
      tab: "tab1",
      list: listData,
      options: {
        tableHeight: 300
      },
      // reportBrandCycleList: [],
      // reportBrandCycleList1: []
    };
  },
  mounted() {
    // this.setYear();
    this.initTable()
    this.getData()
    this.getDetailedData()
    this.$bus.$on("onPatrolDetail", this.onPatrolDetail);
    this.getInitCondition()
    this.$bus.$on('onDetail', ({ item }) => this.onDetail(item))
    this.$bus.$on('onDetailed', this.onDetailed)
  },
  destroyed () {
    this.$bus.$off()
  },
  methods: {
    ...table,
    getData(p) {
      if (p && p.type == 'current') this.list.pageData.current = p.val
      if (p && p.type == 'size') this.list.pageData.size = p.val
      if (!p) this.list.pageData.current = 1
      let url = '/salesman/inspection/inspection_summarizing/page'
      this.list.loading = true;
      let params = {
        current: this.list.pageData.current,
        size: this.list.pageData.size,
        ...this.list.pageData.form
      };
      if (params.cycle) {
        let time = params.cycle.split('~')
        params.beginYearMonth = time[0]
        params.endYearMonth = time[1]
      }
      delete params.distributorId
      params.distributorIds = this.list.pageData.form.distributorId
      params.officeId = this.list.pageData.form.officeId && this.list.pageData.form.officeId.id
      params.inspectionTabType = '1'
      // 经销商巡店统计
      params = clearEmpty(params)
      this.list.pageData.status = 'loading'
      this.$jsonPost(url, params).then(res=> {
        this.list.pageData.status = 'pass'
        this.list.pageData.data = res.records
        this.list.pageData.total = Number(res.total)
      })
    },
    getDetailedData(p) {
      if (p && p.type == 'current') this.list.pageData1.current = p.val
      if (p && p.type == 'size') this.list.pageData1.size = p.val
      let url = '/salesman/inspection/inspection_task/page'
      let params = {
        current: this.list.pageData1.current,
        size: this.list.pageData1.size,
        inspectionTabType: '1',
        ...this.list.pageData1.form
      }
      if (p && p.wg) params.cycle = this.list.pageData1.form.cycle = p.wg
      if (params.cycle) {
        let time = params.cycle.split('~')
        params.beginYearMonth = time[0]
        params.endYearMonth = time[1]
      }
      delete params.cycle
      params = clearEmpty(params)
      // 经销商巡店明细
      this.list.pageData1.status = 'loading'
      this.$jsonPost(url, params).then(res=> {
        this.list.pageData1.status = 'pass'
        this.list.pageData1.data = res.records
        this.list.pageData1.total = Number(res.total)
      })
    }, 
    getInitCondition() {
      this.$store.dispatch('getListDepartmentTree')
      // this.$store.dispatch('getBrandCycle')
      this.$store.dispatch('getStoreTypeList')
    },
    setDistribute(id) {
      this.$store.dispatch('getDistributorDepartment', {departId: id}).then(res=> {
        this.list.pageData.distributor = res
        this.list.pageData.form.distributorId = ''
      })
    },
    setBranch(row) {
      this.list.pageData.branch = ((row && row.children) || [])
    },
    setYear() {
      let date = new Date();
      let y = date.getFullYear() + "";
      this.$refs["table-form"].setFormData("year", y);
    },
    setDateData(row) {
      this.list.pageData.form.beginYearMonth = (row && row.beginYearMonth) || ''
      this.list.pageData.form.endYearMonth = (row && row.endYearMonth) || ''
      this.getData()
    },
    setDateData1(row) {
      this.list.pageData1.form.beginYearMonth = (row && row.beginYearMonth) || ''
      this.list.pageData1.form.endYearMonth = (row && row.endYearMonth) || ''
      // this.getDetailedData()
    },
    setCycle() {
      if (!this.list.pageData.form.storeTypeId) return
      this.list.pageData.form.cycle = ''
      this.$store.dispatch('getBrandCycle', {storeTypeId: this.list.pageData.form.storeTypeId}).then(res => {
        this.list.pageData.reportBrandCycleList = (res || []).map(item => {
            return {
              ...item,
              text: item.beginYearMonth + '~' + item.endYearMonth
            }
        })
      })
    },
    setCycle1() {
      if (!this.list.pageData1.form.storeTypeId) return
      // this.list.pageData1.form.cycle = ''
      return new Promise(resolve => {
        this.$store.dispatch('getBrandCycle', {storeTypeId: this.list.pageData1.form.storeTypeId}).then(res => {
          this.list.pageData1.reportBrandCycleList1 = (res || []).map(item => {
              return {
                ...item,
                text: item.beginYearMonth + '~' + item.endYearMonth
              }
          })
          resolve(res)
        })
      })
    },
    // onDetail(row) {
    //   this.$router.push({ name: "report/brandpatrol/detail" , query: {id: row.id}});
    // },
    onDetail(row) {
      this.$ajaxGet(`/salesman/inspection/store_visit/count/${row.id}`).then(data => {
        if (data.length === 1) {
          this.$router.push({ 
            name: 'report/visit/detail', 
            query: {
              id: data[0]
            }
          })
        } else {
          this.$router.push({ 
            name: 'report/visit/list' , 
            query: {
              storeId: row.storeId,
              storeName: row.storeName
            }
          })
        }
      })
      // this.$router.push({ name: "report/patrol/detail" , query: {id: row.id}})
    },
    onDetailed(item) {
      // 切换
      this.tab = 'tab2'
      // 直接经销商的id
      let storeId = this.reportStoreTypeList.filter(todo => {
        if (todo.desc === item.row.storeTypeName) {
          return item
        }
      })
      this.list.pageData1.form.storeTypeId = storeId[0].value
      this.list.pageData1.form.distributorId = item.row.subjectId
      this.list.pageData1.form.cycle = item.row.beginDate + '~' +  item.row.endDate
      let text = this.list.pageData1.form.cycle
      this.setCycle1().then(res => {
        this.getDetailedData({wg: text})
      })
    }
    
  },
  computed: {
    ...mapGetters([
      'reportDepart',
      'reportFlowTypeList',
      'reportFlowCreatorList',
      'reportStoreTypeList'
    ])
  },
  watch: {
    // tab(val) {
    //   let height = 0
    //   if (val === 'tab1') {
    //     // height = -40
    //   } else {
    //     // height = 40
    //   }
    //   this.initTable(height)
    // }
  }
};
</script>
